<template>
  <div class="contain-table">
    <template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
    </template>
    <!-- 数量区域 -->
    <el-alert
      :title="`数据一共 ${basicsSubList.list.length} 条`"
      type="info"
      :closable="false"
      show-icon
    >
    </el-alert>
    <!-- 表格区域 -->
    <el-table :data="basicsSubList.list">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template slot-scope="{ row }">
          {{ row.questionType | parseQuestionType }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="120">
        <template slot-scope="{ row }">
          <p v-html="row.question"></p>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="200">
        <template slot-scope="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="{ row }">
          {{ row.difficulty | parseDifficulty }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template slot-scope="{ row }">
          {{ row.chkState | parseChkType }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template slot-scope="{ row }">
          {{ row.chkState | parsePublishType }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" @click="previewClick(row)"
            >预览</el-button
          >
          <el-button
            v-if="row.chkState == 1"
            style="color: #ccc"
            disabled
            type="text"
            size="mini"
            >审核</el-button
          >
          <el-button v-else type="text" size="mini" @click="checkClick(row)"
            >审核</el-button
          >
          <el-button type="text" size="mini" @click="toQuestionsNew(row)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="mini"
            v-text="row.publishState === 1 ? '下架' : '上架'"
            @click="publishClick(row)"
          ></el-button>
          <el-button
            type="text"
            size="mini"
            :disabled="row.publishState === 1 ? true : false"
            @click="deletClick(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.page"
      :page-sizes="[2, 5, 10, 20, 40]"
      :page-size="pages.pagesize"
      layout="prev, pager, next, sizes, jumper"
      :total="basicsSubList.counts"
    >
    </el-pagination>
    <!-- 预览弹层 -->
    <QuestionsPreview ref="Preview" :previewShown.sync="showPreview" />
    <!-- 审核弹层 -->
    <QuestionsCheck
      v-if="showCheck"
      :currSub="currSub"
      :showCheck.sync="showCheck"
      @updateSubList="getBasicsSubList"
    />
  </div>
</template>

<script>
// import {
//   difficulty,
//   questionType,
//   chkType,
//   publishType
// } from '@/api/hmmm/constants'
import {
  choice as questionList,
  choicePublish,
  remove
} from '@/api/hmmm/questions'
import QuestionsPreview from './questions-preview.vue'
import QuestionsCheck from './questions-check.vue'
export default {
  name: 'Table',
  props: {
    topFormData: {
      default: () => ({})
    }
  },
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  data () {
    return {
      basicsSubList: {
        list: [], // 基础题库列表
        counts: 0 // 基础题库数量
      },
      tempList: [], // 临时承接数据列表
      // 请求列表数据页数参数
      pages: {
        page: 1,
        pagesize: 5
      },
      showPreview: false, // 控制预览弹层
      showCheck: false, // 控制审核弹层
      currSub: {}, // 最后一次点击列表行试题数据
      activeName: 'first' // 选中选项卡的 name
    }
  },
  created () {
    this.getBasicsSubList()
  },
  computed: {},
  methods: {
    // 获取基础题库列表
    async getBasicsSubList () {
      const { subjectName, keyWord } = this.topFormData
      const {
        data: { items, counts }
      } = await questionList({
        subjectID: subjectName,
        keyword: keyWord,
        ...this.pages
      })
      this.basicsSubList.list = items
      this.tempList = items
      this.basicsSubList.counts = counts
    },
    // 响应每页条数改变
    handleSizeChange (pagesize) {
      this.pages.pagesize = pagesize
      this.getBasicsSubList()
    },
    // 响应页数改变
    handleCurrentChange (page) {
      this.pages.page = page
      this.getBasicsSubList()
    },
    // 预览按钮点击事件句柄
    previewClick (row) {
      this.showPreview = true
      this.$refs.Preview.getQuestionDetails(row.id)
    },
    // 审核按钮点击事件句柄
    checkClick (row) {
      this.currSub = row
      this.showCheck = true
    },
    // 修改按钮点击事件句柄
    toQuestionsNew (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    // 上架下架按钮点击事件句柄
    async publishClick (row) {
      let { id, publishState } = row
      publishState = publishState === 1 ? 0 : 1
      const text = publishState === 1 ? '上架' : '下架'
      try {
        await this.$confirm(`您确认${text}这道题目吗？`)
        await choicePublish({ id, publishState })
        this.getBasicsSubList()
        this.$message.success('操作成功')
      } catch (err) {}
    },
    // 删除按钮点击事件句柄
    async deletClick (row) {
      const { id } = row
      try {
        await this.$confirm('此操作将永久删除改题目，是否继续？')
        await remove({ id })
        this.getBasicsSubList()
        this.$message.success('操作成功')
      } catch (err) {}
    },
    // tab 被选中时触发
    handleClick () {
      switch (this.activeName) {
        case 'first': // 全部
          this.basicsSubList.list = this.tempList
          break
        case 'second': // 待审核
          this.basicsSubList.list = this.tempList.filter(item => item.chkState === 0)
          break
        case 'third': // 已审核
          this.basicsSubList.list = this.tempList.filter(item => item.chkState === 1)
          break
        case 'fourth': // 已拒绝
          this.basicsSubList.list = this.tempList.filter(item => item.chkState === 2)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>>
